M
MLOG
React Lazy Loading: Dzielenie kodu komponentów w celu optymalizacji wydajności | MLOG | MLOG ); } export default ImageGallery;

Oraz komponent Image.js:


import React from 'react';

const Image = ({ src, alt }) => {
  return {alt};
};

export default Image;

W tym przykładzie każdy obraz jest otoczony komponentem <Suspense>, więc komunikat o ładowaniu będzie wyświetlany dla każdego obrazu podczas jego wczytywania. Zapobiega to blokowaniu całej strony podczas pobierania obrazów.

Zaawansowane techniki i uwagi

1. Granice błędów (Error Boundaries)

Podczas korzystania z leniwego ładowania ważne jest, aby obsługiwać potencjalne błędy, które mogą wystąpić w trakcie procesu ładowania. Granice błędów (Error Boundaries) mogą być użyte do przechwytywania tych błędów i wyświetlania interfejsu zastępczego. Możesz utworzyć komponent granicy błędu w ten sposób:


import React, { Component } from 'react';

class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Zaktualizuj stan, aby następne renderowanie pokazało interfejs zastępczy.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // Możesz również zalogować błąd do serwisu raportowania błędów
    console.error(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // Możesz wyrenderować dowolny niestandardowy interfejs zastępczy
      return 
Coś poszło nie tak.
;
    }

    return this.props.children; 
  }
}

export default ErrorBoundary;

Następnie otocz komponent <Suspense> komponentem <ErrorBoundary>:



  Ładowanie...}>

Jeśli podczas ładowania MyComponent wystąpi błąd, <ErrorBoundary> przechwyci go i wyświetli interfejs zastępczy.

2. Renderowanie po stronie serwera (SSR) i Leniwe Ładowanie

Leniwe ładowanie może być również używane w połączeniu z renderowaniem po stronie serwera (SSR), aby poprawić początkowy czas ładowania aplikacji. Wymaga to jednak dodatkowej konfiguracji. Musisz upewnić się, że serwer potrafi poprawnie obsługiwać dynamiczne importy, a leniwie ładowane komponenty są odpowiednio hydratowane po stronie klienta.

Narzędzia takie jak Next.js i Gatsby.js zapewniają wbudowane wsparcie dla leniwego ładowania i dzielenia kodu w środowiskach SSR, co znacznie ułatwia proces.

3. Wstępne ładowanie leniwie ładowanych komponentów

W niektórych przypadkach możesz chcieć wstępnie załadować leniwie ładowany komponent, zanim będzie on rzeczywiście potrzebny. Może to być przydatne dla komponentów, które prawdopodobnie zostaną wkrótce wyrenderowane, takich jak komponenty znajdujące się poniżej widocznej części strony, ale które prawdopodobnie zostaną przewinięte do widoku. Możesz wstępnie załadować komponent, wywołując ręcznie funkcję import():


import('./MyComponent'); // Wstępne ładowanie MyComponent

To rozpocznie ładowanie komponentu w tle, dzięki czemu będzie on dostępny szybciej, gdy zostanie faktycznie wyrenderowany.

4. Dynamiczne importy z magicznymi komentarzami Webpack

„Magiczne komentarze” Webpacka umożliwiają dostosowanie nazw generowanych fragmentów kodu. Może to być pomocne przy debugowaniu i analizowaniu struktury paczek Twojej aplikacji. Na przykład:


const MyComponent = React.lazy(() => import(/* webpackChunkName: "my-component" */ './MyComponent'));

Spowoduje to utworzenie fragmentu kodu o nazwie „my-component.js” (lub podobnej) zamiast nazwy generycznej.

5. Unikanie typowych pułapek

Rzeczywiste przykłady i przypadki użycia

Leniwe ładowanie można zastosować w szerokim zakresie scenariuszy w celu poprawy wydajności aplikacji React. Oto kilka przykładów:

Przykład: Międzynarodowa strona e-commerce

Wyobraź sobie stronę e-commerce sprzedającą produkty na całym świecie. Różne kraje mogą mieć różne waluty, języki i katalogi produktów. Zamiast ładować wszystkie dane dla każdego kraju z góry, możesz użyć leniwego ładowania, aby załadować dane specyficzne dla lokalizacji użytkownika tylko wtedy, gdy odwiedza on stronę.


const CurrencyFormatter = React.lazy(() => import(`./CurrencyFormatter/${userCountry}`))
const ProductCatalog = React.lazy(() => import(`./ProductCatalog/${userCountry}`))

function ECommerceSite() {
  const userCountry = getUserCountry(); // Funkcja do określania kraju użytkownika

  return (
    Ładowanie treści dla Twojego regionu...}>
      
      
    
  );
}

Podsumowanie

Leniwe ładowanie i dzielenie kodu komponentów to potężne techniki optymalizacji wydajności aplikacji React. Ładując komponenty tylko wtedy, gdy są potrzebne, możesz znacznie skrócić początkowy czas ładowania, poprawić doświadczenie użytkownika i wzmocnić swoje SEO. Wbudowane w React komponenty React.lazy() i <Suspense> ułatwiają implementację leniwego ładowania w Twoich projektach. Wykorzystaj te techniki, aby tworzyć szybsze, bardziej responsywne i bardziej angażujące aplikacje internetowe dla globalnej publiczności.

Pamiętaj, aby zawsze brać pod uwagę doświadczenie użytkownika podczas implementacji leniwego ładowania. Zapewnij informacyjne interfejsy zastępcze, elegancko obsługuj potencjalne błędy i starannie analizuj wydajność swojej aplikacji, aby upewnić się, że osiągasz pożądane rezultaty. Nie bój się eksperymentować z różnymi podejściami i znaleźć najlepsze rozwiązanie dla swoich konkretnych potrzeb.